<template>
  <div class="Nat">
    <el-card class="box-card">
      <el-button
        :disabled="natdatas != undefined && natdatas.length == 0 ? false :true"
        type="primary"
        class="AddNat"
        plain
        @click="AddNat()"
        >{{$t("message.center.dialogtitle.addnat")}}</el-button
      >
      <template>
        <el-table :data="natdatas.nat_tasks" style="width: 100%">
          <el-table-column
            v-for="(item, index) in tableheadr"
            :prop="index"
            :label="item"
            width="256px"
            :key="index"
          >
          </el-table-column>
          <el-table-column
            prop="action"
            class="action"
            :label="$t('message.center.routerheaders.action')"
          >
            <template slot-scope="scope" class="action">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >
                <i>
                  <img
                    src="../../../../assets/config/center/download.png"
                    alt=""
                  />
                </i>
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
    <div>
      <el-dialog :title='$t("message.center.dialogtitle.addnat")' :visible.sync="addformdialog" width="450px">
        <el-form
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          label-width="150px"
          class="demo-form"
          width="400px"
        >
          <el-form-item
            :label="$t('message.center.nat.natdata.start_ip')"
            prop="start_ip"
          >
            <el-input  v-model="form.start_ip"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.nat.natdata.end_ip')"
            prop="end_ip"
          >
            <el-input v-model.number="form.end_ip"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.netmask_len')"
            prop="netmask_len"
          >
            <el-input v-model="form.netmask_len"></el-input>
              
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.dns')"
            prop="dns"
          >
            <el-input v-model.number="form.dns"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.gateway')"
            prop="gateway"
          >
            <el-input v-model.number="form.gateway"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.name')"
            prop="name"
          >
            <el-input v-model.number="form.name"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.net_num')"
            prop="net_num"
          >
            <el-input
              v-model.number="form.net_num"
              :value="form.net_num"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addnatdatamodification()">{{$t("message.center.buttom.confirm")}}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog :title='$t("message.center.dialogtitle.updatanat")'  :visible.sync="updatadialog" width="450px">
        <el-form
          :model="updatanatdata"
          status-icon
          :rules="rules"
          ref="form"
          label-width="150px"
          class="demo-form"
          width="400px"
        >
          <el-form-item
            :label="$t('message.center.nat.natdata.start_ip')"
            prop="start_ip"
          >
            <el-input  v-model="updatanatdata.start_ip"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.nat.natdata.end_ip')"
            prop="end_ip"
          >
            <el-input v-model.number="updatanatdata.end_ip"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.netmask_len')"
            prop="netmask_len"
          >
            <el-input v-model="updatanatdata.netmask_len"></el-input>
              
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.dns')"
            prop="dns"
          >
            <el-input v-model.number="updatanatdata.dns"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.gateway')"
            prop="gateway"
          >
            <el-input v-model.number="updatanatdata.gateway"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.name')"
            prop="name"
          >
            <el-input v-model.number="updatanatdata.name"></el-input>
          </el-form-item>

          <el-form-item
            :label="$t('message.center.nat.natdata.net_num')"
            prop="net_num"
          >
            <el-input
              v-model.number="updatanatdata.net_num"
              :value="updatanatdata.net_num"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatamodification()">{{$t("message.center.buttom.confirm")}}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
    
<style scoped>
.box-card {
  width: 100%;
  height: 760px;
  margin: 0px 20px 0px 20px;
}
.Nat {
  width: 100%;
  height: 760px;
  display: flex;
  overflow: hidden;
}
.cell {
  font-size: 14px;
  font-weight: 800;
  /* line-height: 18px; */
}
/* table头 */
.cell {
  font-size: 11px;
  font-weight: 800;
}
button.el-button.el-button--danger.el-button--mini {
  border: none;
  padding: 3px;
  background-color: #4e6d9d;
  /* margin-bottom: 79px; */
  /* top: auto; */
  /* margin-top: -32px; */
  position: absolute;
}
button.el-button.el-button--default.el-button--mini {
  padding: 0px;
  border: none;
}
.AddNat {
  background-color: #4e6d9d;
  color: white;
  /* height: 28px; */
  font-size: 12px;
  line-height: 5px;
  font-weight: 800;
  position: relative;
  left: -722px;
  margin-bottom: 10px;
  /* text-align: left; */
}
</style>
<script>
const ip_reg = /^(?:(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:1[0-9][0-9]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:2[0-5][0-5])|(?:25[0-5])|(?:1[0-9][0-9])|(?:[1-9][0-9])|(?:[0-9]))$/
export default {
  data() {
    var start_ip = (rule, value, callback) => {
      if (!value) {
         callback(new Error("请输入ip地址"));
      } else {
        if (!ip_reg .exec(value)) return callback(new Error("ip地址格式不对"));
        callback();
      }
    };
    var end_ip = (rule, value, callback) => {
     if (!value) {
         callback(new Error("请输入ip地址"));
      } else {
        if (!ip_reg .exec(value)) return callback(new Error("ip地址格式不对"));
        callback();
      }
    };
    var netmask_len = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入netmask_len"));
      } else {
        callback();
      }
    };
    var dns = (rule, value, callback) => {
     if (!value) {
         callback(new Error("请输入ip地址"));
      } else {
        if (!ip_reg .exec(value)) return callback(new Error("ip地址格式不对"));
        callback();
      }
    };
    var gateway = (rule, value, callback) => {
     if (!value) {
         callback(new Error("请输入ip地址"));
      } else {
        if (!ip_reg .exec(value)) return callback(new Error("ip地址格式不对"));
        callback();
      }
    };
    var name = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入名称"));
      }
    };
    var net_num = (rule, value, callback) => {
     if (!value) {
         callback(new Error("请输入ip地址"));
      } else {
        if (!ip_reg .exec(value)) return callback(new Error("ip地址格式不对"));
        callback();
      }
    };
    return {
      updatanatdata:[],
      rules:{
      start_ip: [{ validator: start_ip, trigger: "blur" }],
      end_ip: [{ validator: end_ip, trigger: "blur" }],
      netmask_len: [{ validator: netmask_len, trigger: "blur" }],
      dns: [{ validator: dns, trigger: "blur" }],
      gateway: [{ validator: gateway, trigger: "blur" }],
      name: [{ validator: name, trigger: "blur" }],
      net_num: [{ validator: net_num, trigger: "blur" }],
      },
      tableheadr: {
        name: this.$t("message.center.routerheaders.name"),
        netmask_len: this.$t("message.center.routerheaders.mask_len"),
        dns: this.$t("message.center.routerheaders.DNS"),
        gateway: this.$t("message.center.routerheaders.gateway"),
        net_num: this.$t("message.center.routerheaders.net_num"),
      },
      addformdialog:false,
      updatadialog:false,
      formLabelWidth: "120px",
      form: {
        start_ip: "",
        end_ip: "",
        netmask_len: 24,
        dns: "",
        gateway: "",
        name: "",
        net_num: "",
        speed: 1024000,
      },
    };
  },
  computed: {
    natdatas() {
      console.log(this.$store.state.samnat.natdata);
      return this.$store.state.samnat.natdata;
    },
  },
  methods: {
    handleEdit(index, row) {
      this.updatanatdata = row;
      this.updatadialog= true
    },
    handleDelete(index, row) {
      // 删除数据
      this.$store.dispatch("deletenatdata", row.id);
    },
    addnatdatamodification(){
      // 数据提交
      this.$store.dispatch("addnatdata", this.form);
    },
    updatamodification(){
      // 更改的数据
      this.$store.dispatch("updatanatdata", this.form)
    },
    AddNat() {
      // 添加 Nat
       this.addformdialog= true
    },
  },
};
</script>